<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频聊天</title>
    <style>
        div {
            text-align: center;
            margin-top: 50px;
        }
    </style>
</head>

<body style="background-color: gray;">
    <div>
        <button id="start">Start</button>
        <button id="call">Call</button>
        <button id="hangup">Hangup</button>
    </div>

    <div style="display: flex; text-align: center;">
        <div style="display: inline;">
            <h2>LocalVide</h2>
            <video id="localVideo" autoplay playsinline controls></video>
            <h2>Offer SDP:</h2>
            <textarea id="offer" cols="80" rows="100" value="xxxx"></textarea>
        </div>
        <div style="display: inline;">
            <h2>Remote:</h2>
            <video id="remoteVideo" autoplay playsinline controls></video>
            <h2>Offer SDP:</h2>
            <textarea id="answer" cols="80" rows="100" value="12345"></textarea>
            </div>
           
    </div>
   
</body>

<script src="https://webrtc.github.io/adapter/adapter-latest.js"></script>
<script src="js/main.js"></script>

</html>